export default class BoardCanvas {
  container: any;
  canvas: HTMLCanvasElement;
  ctx: CanvasRenderingContext2D | null;
  startX: number;
  stateY: number;
  pathSegmentHistory: Array<any>;
  index: number;
  constructor(container) {
    // 容器
    this.container = container;
    // canvas画布
    this.canvas = this.createCanvas(container);
    // 绘制工具
    this.ctx = this.canvas.getContext("2d");
    // 起始点位置
    this.startX = 0;
    this.stateY = 0;
    // 画布历史栈
    this.pathSegmentHistory = [];
    this.index = 0;

    // 初始化
    this.init();
  }
  // 创建画布
  createCanvas(container) {
    console.log(container);
    const canvas = document.createElement("canvas");
    canvas.width = container.clientWidth;
    canvas.height = container.clientHeight;
    canvas.style.display = "block";
    container.appendChild(canvas);
    return canvas;
  }

  // 初始化
  init() {
    this.addPathSegment();
    this.setContext2DStyle();
    // 阻止默认右击事件
    this.canvas.addEventListener("contextmenu", (e) => e.preventDefault());
    // 自定义鼠标按下事件
    // this.canvas.addEventListener("mousedown", this.mousedownEvent.bind(this));
    this.canvas.addEventListener("touchstart", this.touchstartEvent.bind(this));
    // 自定义键盘按下事件
    window.document.addEventListener("keydown", this.keydownEvent.bind(this));
  }

  // 设置画笔样式
  setContext2DStyle() {
    this.ctx.strokeStyle = "#EB7347";
    this.ctx.lineWidth = 3;
    this.ctx.lineCap = "round";
    this.ctx.lineJoin = "round";
  }

  addPathSegment() {
    const data = this.ctx.getImageData(
      0,
      0,
      this.canvas.width,
      this.canvas.height
    );

    // 删除当前索引后的路径片段，然后追加一个新的路径片段，更新索引
    this.pathSegmentHistory.splice(this.index + 1);
    this.pathSegmentHistory.push(data);
    this.index = this.pathSegmentHistory.length - 1;
  }

  mousedownEvent(e) {
    const that = this;
    const ctx = this.ctx;
    ctx.beginPath();
    ctx.moveTo(e.offsetX, e.offsetY);
    ctx.stroke();

    this.canvas.onmousemove = function (e) {
      ctx.lineTo(e.offsetX, e.offsetY);
      ctx.stroke();
    };

    this.canvas.onmouseup = this.canvas.onmouseout = function () {
      that.addPathSegment();
      this.onmousemove = null;
      this.onmouseup = null;
      this.onmouseout = null;
    };
  }
  touchstartEvent(e) {
    e.stopPropagation();
    const that = this;
    const ctx = this.ctx;
    ctx.beginPath();
    ctx.moveTo(e.touches[0].pageX, e.touches[0].pageY);
    ctx.stroke();
    const touchmoveEvent = function (e) {
      e.stopPropagation();
      ctx.lineTo(e.touches[0].pageX, e.touches[0].pageY);
      ctx.stroke();
    };
    const touchedEvent = function (e) {
      that.addPathSegment();
      that.canvas.removeEventListener("touchmove", touchmoveEvent.bind(that));
      that.canvas.removeEventListener("touched", touchedEvent.bind(that));
    };
    this.canvas.addEventListener("touchmove", touchmoveEvent.bind(that));
    this.canvas.addEventListener("touched", touchedEvent.bind(that));
  }
  keydownEvent(e) {
    if (!e.ctrlKey) return;
    switch (e.keyCode) {
      case 90:
        this.undo();
        break;
      case 89:
        this.redo();
        break;
    }
  }
  undo() {
    if (this.index <= 0) return;
    this.index--;
    this.ctx.putImageData(this.pathSegmentHistory[this.index], 0, 0);
  }
  redo() {
    if (this.index >= this.pathSegmentHistory.length - 1) return;
    this.index++;
    this.ctx.putImageData(this.pathSegmentHistory[this.index], 0, 0);
  }
}
